<template>
	<view class="index">
		<view class="tabs">
			<u-tabs-swiper
				:active-item-style="actStyle"
				bg-color="#eee"
				ref="uTabs"
				:list="tabList"
				:current="tabCurrent"
				@change="tabsChange"
				:is-scroll="true"
				:bold="false"
			></u-tabs-swiper>
		</view>
		<swiper class="swiper-list" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<template v-if="readerInfo.readerVal">
					<view class="readerInfo">
						<view class="emoji">{{ readerInfo.readerVal }}</view>
						<view class="password"><u-input border v-model="readerInfo.password" placeholder="请输入密码,无密码可忽略" /></view>
						<view v-if="readerInfo.message" class="readySuccess">密语内容：<text user-select selectable>{{ readerInfo.message }}</text></view>
					</view>
					<u-button :ripple="true" class="botBtn" type="primary" @click="decrypt">解密</u-button>
				</template>
				<view v-else class="reader">当前不存在密语，请从微信聊天消息中复制表情密语。</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="writeForm">
					<u-form :model="writeForm" label-width="200rpx" ref="uForm">
						<u-form-item label="需要密码" prop="isPwd">
							<view style="display: flex;align-items: center;"><u-switch v-model="writeForm.isPwd"></u-switch></view>
						</u-form-item>
						<u-form-item v-if="writeForm.isPwd" label="密码" prop="password"><u-input v-model="writeForm.password" placeholder="请输入密码" /></u-form-item>
					</u-form>
				</view>
				<view class="write"><u-input v-model="writeForm.writeVal" type="textarea" placeholder="请输入需要加密的密语" /></view>
				<u-button :ripple="true" class="botBtn" type="primary" @click="encryption">加密</u-button>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { decodeEmoji, encodeEmoji, isCode } from '@/utils/emoji.js';
import { decrypt_cryptolalia, encryption_cryptolalia } from '@/api/api.js';
import { getClipboardData } from '@/utils/clipBoard.js';

export default {
	onLoad(option) {
		if (option.ciphertext) {
			this.readerInfo.readerVal = option.ciphertext;
		} else {
			this.getClipboardData();
		}
		
	},
	data() {
		return {
			readerInfo: {
				readerVal: '',
				password: '',
				message: ''
			},
			writeForm: {
				writeVal: '',
				isPwd: false,
				password: ''
			},
			actStyle: {
				// 'font-size': '36rpx'
			},
			tabList: [
				{
					name: '解密'
				},
				{
					name: '加密'
				}
			],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			tabCurrent: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0 // swiper组件的current值，表示当前那个swiper-item是活动的
		};
	},
	methods: {
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.tabCurrent = current;

			if (this.tabCurrent == 0) {
				this.getClipboardData();
			}
		},
		toast(msg) {
			uni.showToast({
				icon: 'none',
				title: msg
			});
		},
		getClipboardData() {
			getClipboardData()
				.then(res => {
					this.toast("'表情密语' 读取了您的剪贴板");
					if (isCode(res)) {
						this.readerInfo.readerVal = res;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		decrypt() {
			let code = decodeEmoji(this.readerInfo.readerVal);
			let sendData = {
				ciphertext: code,
				password: this.readerInfo.password || ''
			};
			
			uni.showLoading({
			    title: '解密中',
				mask: true
			});
			decrypt_cryptolalia(sendData).then(res => {
				uni.hideLoading()
				this.toast('读取成功');
				this.readerInfo.message = res.message;
			});
		},
		encryption() {
			if (!this.writeForm.writeVal) {
				this.toast('请输入需要加密的密语！');
				return;
			}

			let sendData = {
				message: this.writeForm.writeVal,
				password: this.writeForm.isPwd ? this.writeForm.password : ''
			};

			uni.showLoading({
			    title: '加密中',
				mask: true
			});
			encryption_cryptolalia(sendData).then(res => {
				uni.hideLoading()
				uni.navigateTo({
					url: '../success/success?ciphertext=' + res.ciphertext
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #eee;
	height: 100%;
}

.index {
	display: flex;
	flex-direction: column;
	height: 100%;
	.tabs {
		margin: 0 20rpx;
	}
	.swiper-list {
		flex: 1;
		margin: 20rpx 40rpx 60rpx;
		border-radius: 8rpx;
		background-color: #fff;
		.swiper-item {
			.readerInfo {
				padding: 30rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.emoji {
					margin-top: 20rpx;
					font-size: 40rpx;
					max-width: 100%;
					word-wrap: break-word;
				}
				.password {
					width: 390rpx;
					padding-top: 30rpx;
				}

				.readySuccess {
					margin-top: 40rpx;
					font-size: 40rpx;
					max-width: 100%;
					word-wrap: break-word;
				}
			}

			.reader {
				padding: 20rpx;
				color: #e3e3e3;
			}

			.writeForm {
				margin-left: 20rpx;
			}
			.write {
				padding: 20rpx;
			}
		}
	}

	.botBtn {
		position: absolute;
		border-radius: 8rpx;
		bottom: 0;
		width: 100%;
	}
}
</style>
